﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>${systemName }</title>
    <jsp:include page="/WEB-INF/view/commons/css.jsp" />
</head>

<body class="no-skin">

<div id="navbar" class="navbar navbar-default ace-save-state">

    <!-- 顶部 -->
    <div class="navbar-container ace-save-state" id="navbar-container">
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">Toggle sidebar</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>

        <div class="navbar-header pull-left">
            <a href="index/home" class="navbar-brand">
                <img class="nav-user-photo" src="static/images/system-logo.png" alt="Jason's Photo" />
            </a>
        </div>

        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
                <li class="light-blue dropdown-modal">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="static/plugin/ace/image/avatar2.png" alt="Jason's Photo" />
                        <span class="user-info">
                            <small>Welcome,</small>
                            <shiro:principal property="userName"></shiro:principal>
                        </span>
                        <i class="ace-icon fa fa-caret-down"></i>
                    </a>

                    <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                        <%--<li class="divider"></li>--%>
                        <li>
                            <a href="javascript:logout();" >
                                <i class="ace-icon fa fa-power-off"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div><!-- /.navbar-container -->
</div>

<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try{ace.settings.loadState('main-container')}catch(e){}
    </script>

    <div id="sidebar" class="sidebar responsive ace-save-state">
        <script type="text/javascript">
            try{ace.settings.loadState('sidebar')}catch(e){}
        </script>

        <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
            <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
        </div>

        <ul class="nav nav-list">
            <c:forEach items="${menuList}" var="menu" varStatus="s">
            <c:if test="${menu.permissionLevel eq '1' }">
            <li id="lm${menu.id }">
                <a class="dropdown-toggle" href="javascript:void(0);" >
                    <i class="${menu.icon == null ? 'menu-icon fa fa-bars' : menu.icon}"></i>
                    <span class="menu-text">${menu.permissionName }</span>
                    <b class="arrow fa fa-angle-down"></b>
                </a>
                <b class="arrow"></b>
                <ul class="submenu">
                    <c:forEach items="${menu.child }" var="menu2">
                        <c:choose>
                            <c:when test="${not empty menu2.child}">
                                <li id="lm${menu2.id }">
                                    <a class="dropdown-toggle" href="javascript:void(0);" >
                                        <i class="menu-icon fa fa-caret-right"></i>
                                        <span class="menu-text">${menu2.permissionName }</span>
                                        <b class="arrow fa fa-angle-down"></b>
                                    </a>
                                    <b class="arrow"></b>
                                    <ul class="submenu">
                                        <c:forEach items="${menu2.child }" var="menu3">
                                        <li id="z${menu3.id }">
                                            <a href="javascript:void(0);" class="menu-item" data-url="${menu3.action }" data-menu-id="${menu3.id }" >
                                                <i class="menu-icon fa fa-caret-right"></i>
                                                ${menu3.permissionName }
                                            </a>
                                        </li>
                                        </c:forEach>
                                    </ul>
                                </li>
                            </c:when>
                            <c:otherwise>
                                <li id="z${menu2.id }">
                                    <a href="javascript:void(0);" class="menu-item" data-url="${menu2.action }" data-menu-id="${menu2.id }" >
                                        <i class="menu-icon fa fa-caret-right"></i>
                                            ${menu2.permissionName }
                                    </a>
                                </li>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                </ul>
                </c:if>
            </li>
            </c:forEach>
        </ul><!--/.nav-list-->


    </div>

    <div class="main-content">
        <iframe style="width: 100%;min-height: 500px;" src="index/default" frameborder="0" id="mainFrame">
        </iframe>
    </div>

</div><!-- /.main-container -->

<!-- basic scripts -->
<jsp:include page="/WEB-INF/view/commons/js.jsp" />
<script type="text/javascript" src="static/js/portal/home.js" ></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
    jQuery(function($) {

        //iframe高度自适应
        $(window).on('resize', function(){
            setIframeHeight();

        });
        function setIframeHeight(){
            var mainHeight = $(window).height() - $('#navbar').height()-10;
            $('#mainFrame').height(mainHeight);
        }
        setIframeHeight();

        //菜单点击事件处理
        $('.nav-list .menu-item').on('click', function(){
            var _this = $(this);
            var url = _this.data('url');
            var menuId = _this.data('menuId');
            var frame = _this.data('target') ? _this.data('target') : 'mainFrame';
//            console.log('menu:', menuId, url, frame);
            $('.nav-list li').removeClass('active');
            _this.closest('li').addClass('active');
            $('#'+frame).attr('src', url);
        });
    });
    function loading(msg){
        layer.closeAll('loading');
        layer.load(0,{content:msg,shade:0.3});
    }
    function loaded(){
        layer.closeAll('loading');
    }
</script>
</body>
</html>
